<template>
	<div class="p-page-helper">
		<slot></slot>
		<div v-if="disabled" style="text-align: center;padding: 10px;color: #444;font-size: 12px;">
			已经到底啦
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			endSize:{
				required:false,
				default(){
					return 100
				},
				type:Number
			},
			disabled:{
				required:false,
				default(){
					return false
				},
				type:Boolean
			}
		},
		name:'p-page-helper',
		created(){
			this.$nextTick().then(() => {
				window.onscroll = this.handleScroll
			})
		},
		methods:{
			handleScroll(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				var innerHeight = window.innerHeight
				if(scrollTop+innerHeight+this.endSize>=scrollHeight){
					if(this.disabled == false){
						this.$emit('on-end')
					}
				}
			}
		},
		destroyed(){
			window.onscroll = undefined
			
		}
	}
</script>

<style>
</style>
